<template>
  <div class="components-attr-edit">
    <div v-if="activeElementUUID" class="attr-edit-inner">
      <div class="animate-edit-btn-wrapper pt-5 pr-5 pl-5">
        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              small
              v-bind="attrs"
              v-on="on"
            >
              <v-icon>mdi-plus</v-icon>
              添加事件
            </v-btn>
          </template>
          <v-list>
            <v-list-item v-for="(item, index) in eventTypeList" :key="index" link>
              <v-list-item-title @click="addEvent(item.value)" v-text="item.label" />
            </v-list-item>
          </v-list>
        </v-menu>
        <p class="ml-3" style="display:inline-block">事件在编辑模式下无效果</p>
      </div>
      <div v-show="activeElement.events.length" class="el-animate-list-wrapper pt-5">
        <v-expansion-panels accordion>
          <v-expansion-panel v-for="(item, index) in activeElement.events" :key="index">
            <v-expansion-panel-header>
              <span class="el-animate-title-name">事件 {{ index + 1 }}</span>
              <div class="el-animate-title-type-wrapper">
                <span class="el-animate-title-type">{{ getLabelText(item.type) }}</span>
              </div>
              <span class="el-animate-title-btn" @click.stop.prevent="deleteEvent(index)">
                <v-icon small>mdi-delete</v-icon>
              </span>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div class="el-animate-item">
                <div v-show="item.type !== 'share'" class="attr-item-edit-wrapper">
                  <p class="attr-item-title">链接/接口url：</p>
                  <div class="attr-item-edit-input">
                    <v-textarea
                      v-model="item.url"
                      placeholder="请输入url"
                      :row="3"
                      :row-height="30"
                      outlined
                      auto-grow
                    />
                  </div>
                </div>
              </div>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </div>
    </div>
    <div v-else>
      <p class="gray pt-5 text-center">请在画板上选择需要编辑得元素</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'EventEdit',
  data() {
    return {
      eventTypeList: [{
        label: '链接跳转',
        value: 'link'
      }, {
        label: '分享',
        value: 'share'
      }, {
        label: '表单提交',
        value: 'submitForm'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'currentPageIndex',
      'activeElementIndex',
      'activeElement',
      'activePage'
    ])
  },
  methods: {
    /**
			 * 添加事件
			 * @param type 事件名称
			 */
    addEvent(type) {
      this.$store.dispatch('h5editor/addElementEvent', type)
    },
    /**
			 * 删除事件
			 * @param index
			 */
    deleteEvent(index) {
      this.$store.dispatch('h5editor/deleteElementEvent', index)
    },
    getLabelText(type) {
      let label = ''
      this.eventTypeList.forEach(item => {
        if (item.value === type) {
          label = item.label
        }
      })
      return label
    }
  }
}
</script>

<style lang="scss" scoped>
  .components-attr-edit {
    height: 100%;
  }

  .components-attr-animate-edit {
    position: relative;
  }

  .attr-title {
    font-weight: bold;
  }

  .attr-item-edit-wrapper {
    padding-left: 4px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      width: 86px;
      font-size: 12px;
      line-height: 28px;
    }
    .attr-item-edit-input {
      text-align: left;
      flex: 1;
    }
  }

  .el-animate-list-wrapper {
    .el-animate-title-name {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      width: 55px;
    }
    .el-animate-title-type-wrapper {
      display: inline-block;
      width: 190px;
    }
    .el-animate-title-type {
      display: inline-block;
      vertical-align: middle;
      max-width: 140px;
      height: 24px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #fafafa;
      border-radius: 60px;
      padding: 4px 20px;
      border: none;
      cursor: pointer;
      margin: 0 20px 0 10px;
      line-height: 14px;
    }
    .el-animate-title-btn {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #666;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
      margin-left: 6px;
      &:hover {
        color: white;
        background: #2196F3;
      }
    }
  }
</style>
